<template>
	<div class="screening">
		<el-row :gutter="10" class="screening-container" type="flex" justify="space-between">
			<el-col :span="6">
				<!-- 太原市筛查人数统计 -->
				<div class="screening-container-num screening-container-box">
					<div class="screening-container-title">太原市筛查人数统计</div>
					<el-row :gutter="20" class="screening-container-color">
						<el-col :span="8" style="background: #0b3434" class="screening-container-color-item">
							<div class="item-num">
								{{ tysscrstjInfo.today || 0 }}
							</div>
							<div class="item-title">昨日人数</div>
						</el-col>
						<el-col :span="8" style="background: #5e05b7" class="screening-container-color-item">
							<div class="item-num">
								{{ tysscrstjInfo.month || 0 }}
							</div>
							<div class="item-title">本月人数</div>
						</el-col>
						<el-col :span="8" style="background: #ce0336" class="screening-container-color-item">
							<div class="item-num">
								{{ tysscrstjInfo.year || 0 }}
							</div>
							<div class="item-title">本年人数</div>
						</el-col>
						<el-col :span="6" style="background: #e36c04"
							class="screening-container-color-item screening-container-color-item-25">
							<div class="item-num">
								{{ tysscrstjInfo.gwrs || 0 }}
							</div>
							<div class="item-title">高危人数</div>
						</el-col>
						<el-col :span="6" style="background: #846e02"
							class="screening-container-color-item screening-container-color-item-25">
							<div class="item-num">
								{{ tysscrstjInfo.zwrs || 0 }}
							</div>
							<div class="item-title">中危人数</div>
						</el-col>
						<el-col :span="6" style="background: #2e8cff"
							class="screening-container-color-item screening-container-color-item-25">
							<div class="item-num">
								{{ tysscrstjInfo.dwrs || 0 }}
							</div>
							<div class="item-title">低危人数</div>
						</el-col>
						<el-col :span="6" style="background: #f6580e"
							class="screening-container-color-item screening-container-color-item-25">
							<div class="item-num">
								{{ tysscrstjInfo.sczs || 0 }}
							</div>
							<div class="item-title">筛查总数</div>
						</el-col>
					</el-row>
				</div>
				<!-- 太原市筛查年龄段人数统计 -->
				<div class="screening-container-age screening-container-box">
					<div class="screening-container-title">太原市筛查年龄段人数统计</div>
					<div style="height: 80%">
						<div id="BSCZSCNLDTJ" style="width: 100%; height: 100%"></div>
					</div>
				</div>
				<!-- 太原市卒中管理统计 -->
				<div class="screening-container-firstaid-num screening-container-box">
					<div class="screening-container-title">太原市卒中管理统计</div>
					<el-row :gutter="20" class="screening-container-color">
						<el-col :span="8" style="background: #0b3434" class="screening-container-color-item">
							<div class="item-num">
								<!-- 16 -->
								{{ tysczgltjInfo.today || 0 }}
							</div>
							<div class="item-title">昨日人数</div>
						</el-col>
						<el-col :span="8" style="background: #5e05b7" class="screening-container-color-item">
							<div class="item-num">
								<!-- 242 -->
								{{ tysczgltjInfo.month || 0 }}
							</div>
							<div class="item-title">本月人数</div>
						</el-col>
						<el-col :span="8" style="background: #ce0336;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 206 -->
								{{ tysczgltjInfo.year  || 0}}
							</div>
							<div class="item-title">本月造影量</div>
						</el-col>
						<el-col :span="8" style="background: #ff4500;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 17 -->
								{{ tysczgltjInfo.rs  || 0}}
							</div>
							<div class="item-title">本月溶栓人数</div>
						</el-col>
						<el-col :span="8" style="background: #846e02;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 289 -->
								{{ tysczgltjInfo.jrzl  || 0}}
							</div>
							<div class="item-title">本月介入人数</div>
						</el-col>
						<el-col :span="8" style="background: #fd9133;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 21036 -->
								{{ tysczgltjInfo.total  || 0}}
							</div>
							<div class="item-title">累计总数</div>
						</el-col>
					</el-row>
				</div>
				<!-- 太原市卒中分类占比 -->
				<div class="screening-container-firstaid-age screening-container-box">
					<div class="screening-container-title">太原市卒中分类占比</div>
					<div style="height: 80%">
						<div id="BSCZFLZB" style="width: 100%; height: 100%"></div>
					</div>
					<div></div>
				</div>
			</el-col>
			<el-col :span="12" class="screening-container-center-content">
				<!-- center -->
				<div class="screening-container-center">
					<div class="screening-container-center-title">
						<p style="line-height: 2rem; margin: 0">高质量项目</p>
						<p style="line-height: 2rem; margin: 0">
							太原市中心医院卒中质控管理平台
						</p>
					</div>
					<div class="screening-container-center-count">
						<div class="count-title">平台管理人数</div>
						<div class="count-num">
							<p v-for="(item,index) in ptglrs" :key="index">{{ item }}</p>
						</div>
					</div>
				</div>
				<el-row :gutter="10" class="screening-container-center-list">
					<el-col :span="12" class="screening-container-center-list-item">
						<!-- 太原市筛查人群分布 -->
						<div class="item-content">
							<div class="item-title">太原市筛查人群分布</div>
							<div style="height: 80%">
								<div id="BSSCRQFB" style="width: 100%; height: 100%; margin-top: -5px"></div>
							</div>
						</div>
					</el-col>
					<el-col :span="12" class="screening-container-center-list-item">
						<!-- 本院神经内/外科人群分布 -->
						<div class="item-content">
							<div class="item-title">本院神经内/外科住院人群分布</div>
							<div style="height: 80%">
								<div id="BYZYRQFB" style="width: 100%; height: 100%; margin-top: -5px"></div>
							</div>
						</div>
					</el-col>
					<el-col :span="12" class="screening-container-center-list-item">
						<!-- 本市DNT质控 -->
						<div class="item-content">
							<div class="item-title">本市DNT质控</div>
							<div style="height: 80%">
								<div id="BSDNT" style="width: 100%; height: 100%; margin-top: -5px"></div>
							</div>
						</div>
					</el-col>
					<el-col :span="12" class="screening-container-center-list-item">
						<!-- 本院DNT质控 -->
						<div class="item-content">
							<div class="item-title">本院DNT质控</div>
							<div style="height: 80%">
								<div id="BYDNT" style="width: 100%; height: 100%; margin-top: -5px"></div>
							</div>
						</div>
					</el-col>
					<el-col :span="24" class="screening-container-center-list-item">
						<!-- 本院DPT质控 -->
						<div class="item-content">
							<div class="item-title">本院DPT质控</div>
							<div style="height: 80%">
								<div id="BYDPT" style="width: 100%; height: 100%; margin-top: -5px"></div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="6">
				<!-- 本院神经内/外科住院人数统计 -->
				<div class="screening-container-firstaid-num screening-container-box">
					<div class="screening-container-title">本院神经内/外科住院人数统计</div>
					<el-row :gutter="20" class="screening-container-color">
						<el-col :span="8" style="background: #0b3434" class="screening-container-color-item">
							<div class="item-num">
								<!-- 9 -->
								{{ bysjnwkzyrstjInfo.today || 0 }}
							</div>
							<div class="item-title">昨日人数</div>
						</el-col>
						<el-col :span="8" style="background: #5e05b7" class="screening-container-color-item">
							<div class="item-num">
								<!-- 57 -->
								{{ bysjnwkzyrstjInfo.month || 0 }}
							</div>
							<div class="item-title">四级介入手术</div>
						</el-col>
						<el-col :span="8" style="background: #ce0336;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 4012 -->
								{{ bysjnwkzyrstjInfo.year || 0}}
							</div>
							<div class="item-title">全年造影量</div>
						</el-col>
						<el-col :span="8" style="background: #ff4500;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 478 -->
								{{ bysjnwkzyrstjInfo.rs  || 0}}
							</div>
							<div class="item-title">全年溶栓人数</div>
						</el-col>
						<el-col :span="8" style="background: #846e02;" class="screening-container-color-item">
							<div class="item-num">
								<!-- 5330 -->
								{{ bysjnwkzyrstjInfo.jrzl  || 0}}
							</div>
							<div class="item-title">全年介入人数</div>
						</el-col>
						<el-col :span="8" style="background: #fd9133;" class="screening-container-color-item">
							<div class="item-num">
								{{ bysjnwkzyrstjInfo.total  || 0}}
							</div>
							<div class="item-title">累计总数</div>
						</el-col>
					</el-row>
				</div>
				<!-- 本院神经内/外科住院年龄段人数统计 -->
				<div class="screening-container-firstaid-age screening-container-box">
					<div class="screening-container-title">本院神经内/外科住院年龄段人数统计</div>
					<div style="height: 80%">
						<div id="BYZYNLDTJ" style="width: 100%; height: 100%"></div>
					</div>
					<div></div>
				</div>
				<!-- 国家质控网卒中治疗分布 -->
				<div class="screening-container-firstaid-age screening-container-box-50">
					<div class="screening-container-title">国家质控网卒中治疗分布</div>
					<div style="height: 80%">
						<div id="GJZKWCZZLFB" style="width: 100%; height: 100%"></div>
					</div>
					<div></div>
				</div>
			</el-col>
		</el-row>
		<el-row class="screening-bottom" type="flex" justify="space-between">
			<el-col :span="7">
				<div class="screening-bottom-time">
					<div class="screening-bottom-time-title">
						本市卒中中心质控
					</div>
					<div class="screening-bottom-time-content">
						<div id="BSCZZXZK" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</el-col>
			<el-col :span="10">
				<div class="screening-bottom-middle">
					<div class="screening-bottom-middle-title">
						本院卒中中心疾病种类分布
					</div>
					<div style="height: 80%">
						<div id="BYCZZXJBZLFB" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</el-col>
			<el-col :span="7">
				<div class="screening-bottom-time">
					<div class="screening-bottom-time-title">
						本院卒中中心质控
					</div>
					<div class="screening-bottom-time-content">
						<div id="BYCZZXZK" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	import {
		BSCZSCNLDTJ,
		BSCZFLZB,
		BSSCRQFB,
		BYZYRQFB,
		BSDNT,
		BYDNT,
		BYDPT,
		BYZYNLDTJ,
		GJZKWCZZLFB,
		BSCZZXZK,
		BYCZZXJBZLFB,
		BYCZZXZK
	} from "@/config/screening.js";
	import {
		ptglrsAPI,
		bsczzxzkAPI,
		bsdntzkAPI,
		bsscrqfbAPI,
		byczzxjbzlfbAPI,
		byczzxzkAPI,
		bysjnwknldrstjAPI,
		bysjnwkzyrstjAPI,
		byzyrqfbAPI,
		gjzkwczzlfbAPI,
		tysczflzbAPI,
		tysczgltjAPI,
		tysscnldrstjAPI,
		tysscrstjAPI,
		zydntzkAPI,
		zydptzkAPI
	} from "@/http/index.js";
	export default {
		name: "Index",
		components: {},
		data() {
			return {
				query: {
					startTime: '',
					endTime: '',
					timeType: 3
				},
				pickerOptions: {
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
				ptglrs: [],
				bysjnwkzyrstjInfo: {},
				tysczgltjInfo: {},
				tysscrstjInfo: {},
			};
		},
		async created() {
			// await this.getTime();
			await this.getData()
			// const start = new Date();
			// const end = new Date();
			// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			// await setTimeout(async () => {
			//   await this.$refs.patient.statistics([start, end], 4);
			//   await this.$refs.JM.statistics([start, end], 4);
			//   await this.$refs.XGZL.statistics([start, end], 4);
			// });
		},
		mounted() {
			this.enterFullScreen()
		},
		methods: {
			async getPtglrsAPI() {
				const {
					code,
					data
				} = await ptglrsAPI()
				if (code == 200) {
					this.ptglrs = data.toString().split('')
				}
			},
			async getBsczzxzkAPI() {
				const {
					code,
					data
				} = await bsczzxzkAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BSCZZXZK.series[0].data = [
							data.odt,
							data.dnt,
							data.dit,
							data.dpt,
							data.drt,
							data.prt
						];
						var myChart = echarts.init(document.getElementById("BSCZZXZK"), null);
						myChart.setOption(BSCZZXZK, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getBsdntzkAPI() {
				const {
					code,
					data
				} = await bsdntzkAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						var myChart = echarts.init(document.getElementById("BSDNT"), null);
						myChart.setOption(BSDNT, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getBsscrqfbAPI() {
				const {
					code,
					data
				} = await bsscrqfbAPI(this.query)
				if (code == 200) {
					BSSCRQFB.series[0].data[0].value = data.dwrs
					BSSCRQFB.series[0].data[1].value = data.zwrs
					BSSCRQFB.series[0].data[2].value = data.gwrs
					this.$nextTick(() => {
						var myChart = echarts.init(document.getElementById("BSSCRQFB"), null);
						myChart.setOption(BSSCRQFB, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getByczzxjbzlfbAPI() {
				const {
					code,
					data
				} = await byczzxjbzlfbAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BYCZZXJBZLFB.series[0].data = [
							data.ngs,
							data.tia,
							data.ncx,
							data.zwmxqcx,
							data.lnjmxsxc,
							data.lnjmxdmdxsxc,
							data.xgxcd,
							data.czhsmza,
							data.xgxpjs,
							data.qt
						];
						var myChart = echarts.init(document.getElementById("BYCZZXJBZLFB"), null);
						myChart.setOption(BYCZZXJBZLFB, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getByczzxzkAPI() {
				const {
					code,
					data
				} = await byczzxzkAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BYCZZXZK.series[0].data = [
							data.odt,
							data.dnt,
							data.dit,
							data.dpt,
							data.drt,
							data.prt
						];
						var myChart = echarts.init(document.getElementById("BYCZZXZK"), null);
						myChart.setOption(BYCZZXZK, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getBysjnwknldrstjAPI() {
				const {
					code,
					data
				} = await bysjnwknldrstjAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BYZYNLDTJ.series[0].data[0].value = data.num1;
						BYZYNLDTJ.series[0].data[1].value = data.num2;
						BYZYNLDTJ.series[0].data[2].value = data.num3;
						BYZYNLDTJ.series[0].data[3].value = data.num4;
						BYZYNLDTJ.series[0].data[4].value = data.num5;
						var myChart = echarts.init(document.getElementById("BYZYNLDTJ"), null);
						myChart.setOption(BYZYNLDTJ, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getBysjnwkzyrstjAPI() {
				const {
					code,
					data
				} = await bysjnwkzyrstjAPI(this.query)
				if (code == 200) {
					this.bysjnwkzyrstjInfo = data
					//平台管理人数和太原市卒中管理统计里的累计总数=本院住院人数统计里的累计总数+6858
					const plusNum = 6858;
					const requiredTotal = data.total ? (data.total + plusNum) : plusNum;
					this.tysczgltjInfo.total = requiredTotal;
					this.ptglrs = requiredTotal.toString().split('')
				}
			},
			async getByzyrqfbAPI() {
				const {
					code,
					data
				} = await byzyrqfbAPI(this.query)
				if (code == 200) {
					// cz	卒中	integer(int32)	
					// dwrs	低危人数	integer(int32)	
					// gwrs	高危人数	integer(int32)	
					// tia	TIA	integer(int32)	
					// zwrs	中危人数
					this.$nextTick(() => {
						BYZYRQFB.series[0].data[0].value = data.dwrs;
						BYZYRQFB.series[0].data[1].value = data.zwrs;
						BYZYRQFB.series[0].data[2].value = data.gwrs;
						BYZYRQFB.series[0].data[3].value = data.tia;
						BYZYRQFB.series[0].data[4].value = data.cz;
						var myChart = echarts.init(document.getElementById("BYZYRQFB"),
							null);
						myChart.setOption(BYZYRQFB, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getGjzkwczzlfbAPI() {
				const {
					code,
					data
				} = await gjzkwczzlfbAPI(this.query)
				if (code == 200) {
					// cas	cas	integer(int32)
					// casBl	cas比例	number(bigdecimal)	
					// cea	cea	integer(int32)	
					// ceaBl	cea比例	number(bigdecimal)	
					// jmrs	静脉溶栓	integer(int32)	
					// jmrsBl	静脉溶栓比例	number(bigdecimal)	
					// jrzt	介入再通	integer(int32)	
					// jrztBl	介入再通比例	number(bigdecimal)	
					// lndml	颅内动脉瘤	integer(int32)	
					// lndmlBl	颅内动脉瘤比例	number(bigdecimal)	
					// ncx	脑出血	integer(int32)	
					// ncxBl	脑出血比例
					this.$nextTick(() => {
						GJZKWCZZLFB.series[0].data[0].value = data.jmrs;
						GJZKWCZZLFB.series[0].data[1].value = data.jrzt;
						GJZKWCZZLFB.series[0].data[2].value = data.ncx;
						GJZKWCZZLFB.series[0].data[3].value = data.lndml;
						GJZKWCZZLFB.series[0].data[4].value = data.cea;
						GJZKWCZZLFB.series[0].data[5].value = data.cas;
						var myChart = echarts.init(document.getElementById(
							"GJZKWCZZLFB"), null);
						myChart.setOption(GJZKWCZZLFB, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getTysczflzbAPI() {
				const {
					code,
					data
				} = await tysczflzbAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BSCZFLZB.series[0].data[0].value = data.ngs;
						BSCZFLZB.series[0].data[1].value = data.ncx;
						BSCZFLZB.series[0].data[2].value = data.dzxnqxfz;
						BSCZFLZB.series[0].data[3].value = data.zwmxqcx;
						BSCZFLZB.series[0].data[4].value = data.qt;
						var myChart = echarts.init(document.getElementById(
							"BSCZFLZB"), null);
						myChart.setOption(BSCZFLZB, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getTysczgltjAPI() {
				const {
					code,
					data
				} = await tysczgltjAPI(this.query)
				if (code == 200) {
					Object.keys(data).map((key) => {
						console.log("key=====", key);
						if (key != 'total') {
							this.tysczgltjInfo[key] = data[key]
						}

					})

				}
			},
			async getTysscnldrstjAPI() {
				const {
					code,
					data
				} = await tysscnldrstjAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BSCZSCNLDTJ.series[0].data[0].value = data
							.num1;
						BSCZSCNLDTJ.series[0].data[1].value = data
							.num2;
						BSCZSCNLDTJ.series[0].data[2].value = data
							.num3;
						BSCZSCNLDTJ.series[0].data[3].value = data
							.num4;
						BSCZSCNLDTJ.series[0].data[4].value = data
							.num5;
						var myChart = echarts.init(document
							.getElementById("BSCZSCNLDTJ"), null);
						myChart.setOption(BSCZSCNLDTJ, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getTysscrstjAPI() {
				const {
					code,
					data
				} = await tysscrstjAPI(this.query)
				if (code == 200) {
					this.tysscrstjInfo = data
				}
			},
			async getZydntzkAPI() {
				const {
					code,
					data
				} = await zydntzkAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BYDNT.series[0].data[0].value = data
							.num1;
						BYDNT.series[0].data[1].value = data
							.num2;
						BYDNT.series[0].data[2].value = data
							.num3;
						BYDNT.series[0].data[3].value = data
							.num4;
						var myChart = echarts.init(document
							.getElementById("BYDNT"), null);
						myChart.setOption(BYDNT, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			async getZydptzkAPI() {
				const {
					code,
					data
				} = await zydptzkAPI(this.query)
				if (code == 200) {
					this.$nextTick(() => {
						BYDPT.series[0].data[0].value =
							data.num1;
						BYDPT.series[0].data[1].value =
							data.num2;
						BYDPT.series[0].data[2].value =
							data.num3;
						BYDPT.series[0].data[3].value =
							data.num4;
						var myChart = echarts.init(document
							.getElementById("BYDPT"),
							null);
						myChart.setOption(BYDPT, true);
						myChart.resize();
						window.onresize = myChart.resize;
					});
				}
			},
			getTime() {
				const start = new Date();
				const end = new Date();
				end.setTime(start.getTime());
				start.setTime(start.getTime() - 3600 * 1000 * 24 *
					365);
				let _data = [];
				_data = [start, end];
				_data[0] = this.$moment(_data[0]).format(
					"YYYY-MM-DD");
				_data[1] = this.$moment(_data[1]).format(
					"YYYY-MM-DD");
				this.query = {
					startTime: _data[0] + " " + "00:00:00",
					endTime: _data[1] + " " + "23:59:59",
				};
				console.log("this.query: ", this.query);
			},
			// 查询
			async getData() {
				try {
					// 平台管理人数
					// this.getPtglrsAPI()
					// 本市卒中中心质控
					this.getBsczzxzkAPI()
					// 本市dnt质控
					this.getBsdntzkAPI()
					// 本市筛查人群分布
					this.getBsscrqfbAPI()
					// 本院卒中中心疾病种类分布
					this.getByczzxjbzlfbAPI()
					// 本院卒中中心质控
					this.getByczzxzkAPI()
					// 本院神经内/外科住院年龄段人数统计
					this.getBysjnwknldrstjAPI()
					// 本院神经内/外科住院人数统计
					this.getBysjnwkzyrstjAPI()
					// 本院住院人群分布
					this.getByzyrqfbAPI()
					// 国家质控网卒中治疗分布
					this.getGjzkwczzlfbAPI()
					// 太原市卒中分类占比
					this.getTysczflzbAPI()
					// 太原市卒中管理统计
					this.getTysczgltjAPI()
					// 太原市筛查年龄段人数统计
					this.getTysscnldrstjAPI()
					// 太原市筛查人数统计
					this.getTysscrstjAPI()
					// 住院DNT质控
					this.getZydntzkAPI()
					// 住院DPT质控
					this.getZydptzkAPI()
					return {}
				} catch (err) {
					console.log("err: ", err);
					return {}
				}
			},
			enterFullScreen() {
				document.fullScreenEnabled = true
				var docElm = document.documentElement
				//W3C
				if (docElm.requestFullscreen) {
					docElm.requestFullscreen()
				}
				//FireFox
				else if (docElm.mozRequestFullScreen) {
					docElm.mozRequestFullScreen()
				}
				//Chrome等
				else if (docElm.webkitRequestFullScreen) {
					docElm.webkitRequestFullScreen()
				}
				//IE11
				else if (elem.msRequestFullscreen) {
					elem.msRequestFullscreen()
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.screening {
		flex: 1;
		padding: 0 .5%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		&-container {
			flex: 1;
			display: flex;

			&-title {
				padding-left: 1.4rem;
				color: #fff;
				height: 20%;
				line-height: 20%;
				display: flex;
				align-items: center;
			}

			&-box {
				background-image: url("../assets/images/leftTop.png");
				background-size: 100% 100%;
				width: 100%;
				height: 24.4%;
				margin-bottom: 0.5rem;
			}

			&-box-50 {
				border: 1px solid #0efcff;
				border-radius: 8px;
				width: 100%;
				height: 49%;
				margin-bottom: 0.5rem;

				.screening-container-title {
					height: 10%;
					line-height: 10%;
				}
			}

			&-color {
				padding-left: 3.2%;
				height: 76%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				&-item {
					width: 30%;
					height: 43%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: #fff;
					margin: 0 1.2%;

					&-25 {
						width: 22%;
					}

					.item-num {
						font-size: 0.9rem;
						margin-bottom: 0.2rem;
					}

					.item-title {
						font-size: 1rem;
					}
				}
			}

			&-center-content {
				display: flex;
				flex-direction: column;
			}

			&-center {
				margin: 1rem auto 0.5rem;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&-title {
					width: 100%;
					padding: 0.5rem 1rem;
					border: 1px solid #0efcff;
					border-radius: 0.8rem;
					color: #fff;
					text-align: center;
					font-size: 1.5rem;
					line-height: 3rem;
				}

				&-count {
					margin-top: 0.5rem;
					flex: 1;

					.count-title {
						font-weight: 600;
						font-size: 1.6rem;
						color: #00eaff;
						text-align: center;
						margin-bottom: 0.8rem;
					}

					.count-num {
						display: flex;
						justify-content: center;

						p {
							width: 3rem;
							height: 100%;
							line-height: 100%;
							background-image: url("../assets/images/7537@2x.png");
							background-size: 100% 100%;
							color: #00eaff;
							font-size: 3rem;
							text-align: center;

							&:not(:last-child) {
								margin-right: 14px;
							}
						}
					}
				}

				&-list {
					flex: 1;
					display: flex;
					flex-wrap: wrap;

					&-item {
						width: 50%;
						height: 30%;
						// flex: 1;
						margin-top: 1.8%;

						&:last-child {
							width: 100%;
						}

						.item-content {
							height: 100%;
							background-size: 100% 100%;
							background-image: url("../assets/images/7545@2x.png");
						}

						.item-title {
							font-size: 0.9rem;
							color: #fff;
							line-height: 28px;
							padding-left: 1.3rem;
						}
					}
				}
			}
		}

		&-bottom {
			height: 22%;
			margin-top: 10px;

			&-time {
				background-image: url("../assets/images/7567@2x.png");
				background-size: 100% 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				&-title {
					height: 25.5%;
					display: flex;
					align-items: flex-end;
					padding-left: 10%;
					font-size: 1rem;
					color: #fff;
				}

				&-content {
					flex: 1;
				}
			}

			&-middle {
				background-image: url("../assets/images/7568@2x.png");
				background-size: 100% 100%;
				height: 100%;

				&-title {
					font-size: 15px;
					line-height: 24px;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>